<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../jquery-3.3.1.min.js"></script>
    <style>
        #outer{width: 800px; height: 50px; border: 3px solid #ccc; margin: 50px auto 10px; position: relative; } #inner{width: 0%; height: 50px; background: skyblue; } #outer span{font-size: 25px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } button:first-of-type{margin-left: 450px; } 
    </style>
</head>
<body>
    <div id="outer">
        <div id="inner"></div>
        <span>0%</span>
    </div>
    <button>开始下载</button>
    <button>暂停下载</button>
    <script>
        $(function(){
            var width = 0;
            var timer;
            var flag = true;
            $('button').eq(0).click(function(){
                if (flag == true) {
                    flag = false
                    timer = setInterval(function(){
                        if (width >= 100) {
                            clearInterval(timer);
                            alert('下载成功');
                            $('button').eq(0).text('重新下载');
                            width = 0;
                            flag =true;
                            return;
                        }
                        width++;
                        $('#inner').css('width',width+'%')
                        $('#outer span').text(width+'%')

                    },50)
                }
            })

            $('button').eq(1).click(function(){
                if (flag == false) {
                    clearInterval(timer);
                    flag = true;
                    $('button').eq(0).text('继续下载');
                }
            })








            }
        )
    </script>
</body>
</html>